<!-- 合同基础设置 -->
<template>
  <div class="step2">
    <div class="tab">
      <div class="title">选择人员：</div>
      <a-space>
        <a-button v-for="item in userList" :key="item.id" size="mini" class="butss" :status="choiceUserId === item.id ? 'success' : 'normal'" shape="round" @click="choiceUserId = item.id">
          {{ item.name }}
        </a-button>
      </a-space>
    </div>
    <div class="tab">
      <div class="title">选择合同与附件：</div>
      <a-space>
        <a-button v-for="(item,index)  in temList" :key="item.uuid" size="mini" class="butss" :status="choiceTemId === item.uuid ? 'success' : 'normal'" shape="round" @click="tabsContract(item,index)">
          {{ item.name }}
        </a-button>
      </a-space>
    </div>
    <RichTextTemplate style="flex: 1" v-model:codes="richTextTemplateValue.codes" v-model:text="richTextTemplateValue.text" :height="600" v-if="!fileShow" />
    <!-- 本地合同查看器 -->
    <FilePreview ref="previewFileRef" :style="'padding:20px;min-height:' +(paper.a4.height - 40)+'px'" v-if="fileShow" class="body" :file="previewFile">
    </FilePreview>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import FilePreview from './FilePreview.vue';
import { paper } from '@/utils/printAndPdf';

let choiceTemId = ref('');
let choiceUserId = ref(0);
let temObj = reactive<any>({});
let temList = ref<any[]>([]);
let userList = ref<any[]>([]);
const fileShow = ref(false);
// 组件数据
let previewFile = reactive({
  id: '',
  fileName: '',
  downloadUrl: ''
});
defineExpose({
  async setData({ templateObj, templateList, users }: any) {
    temList.value = templateList;
    userList.value = users;
    choiceTemId.value = templateList[0].uuid;
    choiceUserId.value = users[0].id;
    for (const key in temObj) {
      delete temObj[key];
    }
    Object.assign(temObj, templateObj);
    await getCodes();
  },
  async getData() {
    return {
      templateObj: temObj,
      templateList: temList.value,
      userList: userList.value
    };
  }
});
// 切换模版
const tabsContract = async (row: any, index: number) => {
  choiceTemId.value = row.uuid;
  if (!row.codes) {
    fileShow.value = true;
  } else {
    fileShow.value = false;
    // 找到符合条件的模版替换内容
    temList.value[index].text = richTextTemplateValue.value.text;
    // temList.value.map((item) => {
    //   if (item.name == richTextTemplateValue.value.name) {
    //     item.text = richTextTemplateValue.value.text;
    //   }
    //   return item;
    // });
    console.log('index', temList.value[index]);
  }
};
// 判断是本地文件
const getCodes = () => {
  // console.log('判断是本地文件', richTextTemplateValue.value);
  if (!richTextTemplateValue.value.codes) {
    previewFile.id = richTextTemplateValue.value.fileId;
    previewFile.fileName = richTextTemplateValue.value.fileName;
    previewFile.downloadUrl = richTextTemplateValue.value.fileUrl;
    fileShow.value = true;
  } else {
    fileShow.value = false;
  }
};

let richTextTemplateValue = computed({
  get() {
    if (!choiceTemId.value || !choiceUserId.value) return {};
    return temObj[choiceUserId.value + '-' + choiceTemId.value];
  },
  set(val) {
    temObj[choiceUserId.value + '-' + choiceTemId.value] = { ...val };
  }
});
</script>

<style lang="less" scoped>
.step2 {
  .body {
    margin: 0 auto;
    text-align: center;
    word-wrap: break-word;
    margin-bottom: 70px;
    box-shadow: 0px 0px 5px var(--color-neutral-6);
    // transform: scale(1.4);
    width: 80%;
  }
  .tab {
    display: flex;
    justify-content: left;
    align-items: center;
    height: 25px;
    margin-bottom: 10px;
    .title {
      font-size: 16px;
      margin-right: 10px;
    }
  }
}
</style>
